<template>
    <div class="pagination-container">
      <el-pagination
        :current-page="current"
        :page-size="pageSize"
        :total="total"
        :page-sizes="pageSizes"
        :layout="layout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="el-pagination"
      />
    </div>
  </template>
  
  <script setup lang="ts">
  interface Props {
    current: number
    pageSize: number
    total: number
    pageSizes?: number[]
    layout?: string
  }
  
  const props = withDefaults(defineProps<Props>(), {
    pageSizes: () => [10, 20, 50, 100],
    layout: 'total, sizes, prev, pager, next, jumper'
  })
  
  const emit = defineEmits(['update:current', 'update:pageSize', 'pagination-change'])
  
  const handleSizeChange = (val: number) => {
    emit('update:pageSize', val)
    emit('pagination-change', { page: props.current, pageSize: val })
  }
  
  const handleCurrentChange = (val: number) => {
    emit('update:current', val)
    emit('pagination-change', { page: val, pageSize: props.pageSize })
  }
  </script>
  
  <style scoped>
  .pagination-container {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
  }
  .el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
  </style>